<template>
  <div class="campus-binhai">
    <h2>温州理工滨海校区</h2>
    <input type="text" v-model="searchStudentId" placeholder="请输入学号">
    <button @click="searchStudent">搜索</button>
    <div v-if="foundStudentInfo">
      <h3>学生信息</h3>
      <p>学号: {{ foundStudentInfo.studentId }}</p>
      <p>姓名: {{ foundStudentInfo.name }}</p>
      <p>年龄: {{ foundStudentInfo.age }}</p>
      <p>专业: {{ foundStudentInfo.major }}</p>
    </div>
    <div v-else>
      <p>未找到符合条件的学生信息</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchStudentId: '',
      studentInfoList: [
        {
          studentId: '123456',
          name: '小明',
          age: 18,
          major: '计算机科学与技术'
        },
        // 可以添加更多学生信息
      ],
      foundStudentInfo: null
    };
  },
  methods: {
    searchStudent() {
      this.foundStudentInfo = this.studentInfoList.find(student => student.studentId === this.searchStudentId);
    }
  }
};
</script>

<style>
.campus-binhai {
  text-align: center;
}
</style>